import React, { useState, useEffect } from 'react'
import Web3 from 'web3'
import Simpleness from './Simpleness'
import Contract from './Contract'

export default function Index() {
    const [walletInfo, setWalletInfo] = useState(null)
    const [textVal, setTextVal] = useState('当前输出内容为空！')
    const [textVal2, setTextVal2] = useState(null)
    const [cover, setCover] = useState(null)

    useEffect(() => {
        if (!walletInfo) {
            getWalletInfo()
        }
    }, [walletInfo])

    const getWalletInfo = async () => {
        const web3 = new Web3(Web3.givenProvider)
        let walletInfo = {}
        setTimeout(() => {
            walletInfo.web3 = web3
            walletInfo.account = web3.currentProvider.selectedAddress
            walletInfo.chainId = web3.currentProvider.networkVersion
            setWalletInfo(walletInfo)
        }, 200)
    }

    return (
        walletInfo && <div>
            <i>提示：进行以下操作请基于连接了matemask情况下，或者自定义节点</i>
            <br />
            <br />
            <textarea value={
                `显示屏1： 当前账号：${walletInfo.account}            当前网络ID: ${walletInfo.chainId}
----------------------------------------------------------------------------------------
输出内容：
    
    ${textVal}
                `
            } cols="90" rows="8" disabled></textarea>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            {textVal2 && <textarea value={
                `显示屏2：
----------------------------------------------------------------------------------------
输出内容：
    
    ${textVal2}
                `
            } cols="90" rows="8" disabled></textarea>}
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            {cover && <img height={120} src={cover} alt="" />}
            <hr />
            <Simpleness walletInfo={walletInfo} setTextVal={setTextVal} />
            <Contract walletInfo={walletInfo} setTextVal={setTextVal} setTextVal2={setTextVal2} setCover={setCover} />
        </div>
    )
}
